<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="layui/css/layui.css">
    <title>Title</title>
</head>
<body>
<!--
删除放在行内，其余全部放在头部
-->

<form class="layui-form" >

    <div class="layui-form-item">

        <label class="layui-form-label">员工姓名</label>
        <div class="layui-input-inline">
            <input  name="name"  lay-verify="required"  placeholder="员工姓名" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label" >员工手机</label>
        <div class="layui-input-inline">
            <input  name="phone" lay-verify="phone"  placeholder="员工手机号码" autocomplete="off" class="layui-input">
        </div>

        <label class="layui-form-label">性别</label>
        <div class="layui-input-inline">
            <input type="radio" name="sex" value="0" title="男">
            <input type="radio" name="sex" value="1" title="女" checked>
        </div>



    </div>
    <div class="layui-form-item">

        <label class="layui-form-label">出生日期</label>
        <div class="layui-input-inline">
            <input id="test1" name="birthday"    placeholder="出生日期" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label" >毕业院校</label>
        <div class="layui-input-inline">
            <input  name="edu"  lay-verify="required" placeholder="毕业院校" autocomplete="off" class="layui-input">
        </div>


    </div>
    <!--
    <div class="layui-form-item">
        <select name="depart" lay-filter="depart_filter" id="depart" lay-verify="required">
             <option value="">请选择</option>
        </select>
        <select name="position" lay-filter="depart_filter" id="position" lay-verify="required">
          <option value="">请选择</option>
        </select>

    </div>
    -->

    <div class="layui-form-item">
        <label class="layui-form-label">选择部门</label>
        <div class="layui-input-inline">
            <select name="depart_id" lay-filter="depart_filter" id="depart" lay-verify="required">
            </select>
        </div>
        <label class="layui-form-label">选择职位</label>
        <div class="layui-input-inline">
            <select name="position_id" lay-filter="depart_filter" id="position" lay-verify="required">
            </select>
        </div>
        <div class="layui-input-inline">
            <button style="margin-left: 100px" type="button" lay-filter="formDemo" lay-submit lay-filter="adddepart" class="layui-btn" >添加员工</button>
        </div>
    </div>



</form>



<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <!--<button class="layui-btn layui-btn-sm"  lay-event="show">查看该部门所有员工</button>-->
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="update">修改</button>
    </div>
</script>
<table id="demo" lay-filter="test"></table>
<script src="layui/layui.js"></script>
<script>
    layui.use(['jquery','layer', 'form','element','table','laydate'], function(){
        var layer = layui.layer,
            element=layui.element,
            form = layui.form,
            table= layui.table,
            laydate=layui.laydate,
            $=layui.jquery;

        laydate.render({
            elem: '#test1'
            //,type: 'date' //默认，可不填
        });

        //最早执行这个
        $.ajax({
            url: 'http://localhost:8080/depart/findAll',
            dataType: 'json',
            type: 'post',
            success: function (data) {
                 console.log(data);
                $.each(data, function (index, item) {
                    console.log(item);
                    $('#depart').append(new Option(item.name, item.id));// 下拉菜单里添加元素
                });
                form.render("select");

               /* $("#depart").prepend("<option value='0'>请选择</option>");//添加第一个option值
                for (var i = 0; i < data.length; i++) {

                    //如果在select中传递其他参数，可以在option 的value属性中添加参数
                    //$("#selectSM").append("<option value='"+msg.rows[i].id+"'>"+msg.rows[i]+"</option>");

                    $("#selectSM").append("<option>" + data.rows[i] + "</option>");
                }*/
               console.log(data);
            }
        });

        $.ajax({
            url: 'http://localhost:8080/position/selectAll',
            dataType: 'json',
            type: 'post',
            success: function (data) {
                console.log(data);
                $.each(data, function (index, item) {
                    console.log(item);
                    $('#position').append(new Option(item.name, item.id));// 下拉菜单里添加元素
                });
                form.render("select");

                /* $("#depart").prepend("<option value='0'>请选择</option>");//添加第一个option值
                 for (var i = 0; i < data.length; i++) {

                     //如果在select中传递其他参数，可以在option 的value属性中添加参数
                     //$("#selectSM").append("<option value='"+msg.rows[i].id+"'>"+msg.rows[i]+"</option>");

                     $("#selectSM").append("<option>" + data.rows[i] + "</option>");
                 }*/
                console.log(data);
            }
        });

        var tableIns=table.render({
                elem:'#demo',
                /*title:'部门信息管理',*/
                url:'http://localhost:8080/staff/findAll',
                pages:false,
                cols:  [[ //标题栏
                    {field: 'id', title: '员工编号'}
                    ,{field: 'name', title: '员工姓名'}
                    ,{field: 'phone', title: '手机号码'}
                    ,{field: 'sex', title: '性别',templet:function (d) {
                       if(d.sex)
                           return "女";
                       else
                           return "男";
                        }}
                    ,{field: 'birthday', title: '出生日期'}
                    ,{field: 'edu', title: '毕业院校'}
                    ,{field: 'depart_name', title: '所属部门'}
                    ,{field: 'position_name', title: '职务'}
                    ,{field: 'wages', title: '工资'}
                    ,{toolbar: '#toolbarDemo',title: '操作',fixed: 'right'}
                ]],
                parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code": "0", //解析接口状态
                        "msg": "", //解析提示文本
                        "data": res //解析数据列表
                    };
                }
            }

        );

        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'delete'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);

                    $.ajax({
                        url:"http://localhost:8080/staff/delete",
                        data:{id:data.id},
                        type:"post",
                        dataType:"json",
                        success:function(data){
                            if(data===1)
                            {
                                layer.msg("删除成功");

                            }
                            else
                            {
                                layer.msg("删除失败");
                            }

                            //layer.msg(data.toString());
                        },
                        error:function(data){
                            layer.msg("删除失败");
                        }
                    });


                });
            }
            else if(layEvent === 'update')
            {
                layer.msg("修改");

            }
        });
        form.on('submit(formDemo)', function(data){
           //layer.msg(data.toString());
            console.log(data);

            $.ajax({
                url:"http://localhost:8080/staff/add",
                data:data.field,
                type:"post",
                dataType:"json",
                success:function(data){
                    if(data===1)
                    {
                        layer.msg("添加成功");
                        tableIns.reload();

                    }
                    else
                    {
                        layer.msg("添加失败");
                    }

                    //layer.msg(data.toString());
                },
                error:function(data){
                    layer.msg("添加失败");
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


    })
</script>
</body>
</html>